<template>
  <div class="search-info">
    <header class="search-header">
      <span @click="goBack">
        <img src="../../assets/images/return.png" alt />
      </span>
      <span>
        <input
          class="input"
          v-model="input"
          placeholder="请输入内容"
          @focus="emptybool=false;searchbool=false"
        />
      </span>
      <span @click="goBack" v-if="input==''">取消</span>
      <span @click="gotosearch" v-if="input!=''" style="color: #000">搜索</span>
      <!-- <span @click="gotosearch" style="color: #000">搜索</span> -->
    </header>
    <!-- 历史搜索 -->
    <section class="history-search" v-if="input==''">
      <header class="his-header">
        <p>
          <span>历史搜索</span>
          <span>
            <i @click="empty_his"></i>
          </span>
        </p>
      </header>
      <div class="list">
        <span v-for="(item,index) in hisList" :key="index" @click="input=item;">{{item}}</span>
      </div>
    </section>

    <!-- 列表 -->
    <van-list v-model="loading" :finished="finished" @load="onLoad">
        <div class="classify">
            <ul>
                <li v-for="(item,key) in classList" :key="key" @click="Info(item.id)">
                <div>
                    <p class="tit">{{item.title}}</p>
                    <p>{{item.start_play_date | formatDate}} ~ {{item.end_play_date | formatDate}}共{{item.sales_num}}课时</p>
                    <p class="p1" v-for="(i,k) in item.teachers_list" v-show="k<3">
                    <img :src="i.teacher_avatar" alt />
                    <span>{{i.teacher_name}}</span>
                    </p>
                </div>
                <p>
                    <span>共有{{item.total_periods}}人报名</span>
                    <span class="spa">免费</span>
                </p>
                </li>
            </ul>
         </div>
    </van-list>
  </div>
</template>

<script>
import { List } from 'vant';
import { search } from "../../request/api.js";
export default {
  components:{
         [List.name]: List,
    },
  data() {
    return {
      input: "",
      input_history:JSON.parse(localStorage.getItem('list'))||[],
      searchbool: false,
      emptybool: false,
      classList: [],
      empty_type: {
        name: "暂无搜索结果"
      },
      page: 1,
      name: this.$route.query.name,
      loading: false,
      finished: true,
      hisList:[]
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    empty_his() {
      this.hisList = [];
      localStorage.removeItem('list');
    },
    gosearch() {
        if (this.name) {
        this.$router.replace({
          name: this.name
        });
        return;
      }
      if (this.finished) {
        this.page = 0;
        this.finished = false;
      } else {
        this.page = 1;
        this.getCourse();
      }
    },
    getCourse() {
         search({limit: 10,
          page: this.page,
          course_type: 0,
          keywords: this.input}).then(res => {
          this.loading = false;
          console.log(res.data.list)
          if (res.data.list.length == 0) {
            this.finished = true;
            if (this.page == 1) {
              this.emptybool = true;
            }
            return;
          }
          if (this.page == 1) {
            this.classList = res.data.list;
            console.log(this.classList)
          } else {
            this.classList = this.classList.concat(res.data.list);
            console.log(this.classList)
          }
          this.emptybool = false;
          this.searchbool = true;
        });
    },
    gotosearch() {
      this.input_history.unshift(this.input)
      for(var i=0;i<this.input_history.length;i++){
        if(!this.hisList.includes(this.input_history[i])){
          this.hisList.push(this.input_history[i])
        }
      }
      localStorage.setItem('list', JSON.stringify(this.hisList));
      this.gosearch()
      
    },
    inp() {
      
    },
    inp_his() {
      
    },
    onLoad() {
      this.page++;
      this.getCourse();
    }
  },
  created() {
    // this.inp();
    this.inp_his();
    // if (this.input != "") {
    //   this.gotosearch();
    // }
  },
  watch: {
    input(val) {
      if (!val) {
        this.classList = [];
      }
    }
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value*1000);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let a=""
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return MM + "月" + d + "日" + h + ":" + m ;
    }
  },
};
</script>

<style scoped lang="scss">
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.search-info {
  padding-bottom: 80px;
  .search-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid rgba(234, 234, 234, 1);
    background: #fff;
    span {
      &:nth-child(1) {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        align-items: center;
        img {
          width: 18px;
          height: 32px;
          padding-left: 30px;
        }
      }
      &:nth-child(2) {
        flex: 6;
        input {
          height: 30px;
          padding-left: 56px;
          border: none;
          background: #e4e7ed;
          border-radius: 30px;
          font-size: 15px;
          width: 86%;
          outline: none;
        }
      }
      &:nth-child(3) {
        flex: 1;
        font-size: 15px;
        color: #d2d2d1;
      }
    }
  }
  .history-search {
    margin-left: 30px ;
    .his-header {
      height: 60px;
      p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        span {
          &:nth-child(1) {
            font-size: 20px;
            color: #333;
            font-weight: bold;
          }
          &:nth-child(2) {
            i {
              display: inline-block;
              background: url("../../assets/images/delete-history.png")
                no-repeat;
              background-size: 100% 100%;
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      span {
        padding: 12px 20px;
        margin-left:10px;
        border-radius: 20px;
        background: rgba(247, 247, 247, 1);
        font-size: 15px;
        color: #333;
      }
    }
  }
  .search-status {
    margin: 20px;
    li {
      height: 102px;
      padding-left: 18px;
      line-height: 102px;
      font-size: 30px;
      color: #333;
      text-align: left;
      &:not(:last-child) {
        border-bottom: 0.5px solid rgba(234, 234, 234, 1);
      }
    }
  }
  .index-item-page {
    background: #f8f8f8;
  }
}
.classify {
  width: 100%;
  margin-bottom: 50px;
  h5 {
    font-size: 18px;
    margin-top: 20px;
    margin-left: 10px;
  }
  ul {
    list-style: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 96%;
      height: 150px;
      background: white;
      display: block;
      margin: 0 auto;
      margin-top: 15px;
      border-radius: 5px;
      text-align: left;
      div {
        width: 100%;
        height: 70%;
        border-bottom: 1px solid rgb(165, 163, 163);
        line-height: 30px;
        margin-left: 5px;
        .tit {
          font-size: 13px;
        }
        .p1 {
          display: inline;
        }
        p > img {
          width: 15px;
          height: 15px;
          border-radius: 50px;
          margin-left:15px;
        }
      }
      p {
        font-size: 13px;
        .spa {
          color: green;
          float: right;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>